<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="baseRef"
      :label-width="'100px'"
      class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="员工姓名:"
            prop="realName"
            :rules="[
              { required: true, message: '请输入员工姓名', trigger: 'change' },
            ]">
            <el-input
              maxlength="10"
              show-word-limit
              v-model="ruleForm.realName"
              placeholder="请输入员工姓名"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="联系电话:"
            prop="phone"
            :rules="[
              { required: true, message: '请填写联系电话', trigger: 'change' },
              { min: 1, max: 11, message: '电话长度为11个字符', trigger: 'blur' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码不合法，请重新输入' },
            ]">
            <el-input 
              maxlength="11" 
              v-model="ruleForm.phone" 
              placeholder="请输入联系电话" 
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="身份证:"
            prop="idCard"
            :rules="[
              { required: false, message: '请输入身份证号码', trigger: 'change' },
              { pattern: /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/, message: '身份证不合法，请重新输入' },
            ]">
            <el-input
              maxlength="18"
              @blur="handleBlur"
              v-model="ruleForm.idCard"
              placeholder="请输入身份证号码"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="入职公司:"
            prop="entryCompany"
            :rules="[
              { required: false, message: '请选择入职公司', trigger: 'change' },
            ]">
            <el-select
              filterable
              v-model="ruleForm.entryCompany"
              placeholder="请选择入职公司"
              style="width: 100%">
              <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.companyName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="入职状态:"
            prop="staffState"
            :rules="[
              { required: false, message: '请选择入职公司', trigger: 'change' },
            ]">
            <el-select
              style="width: 100%"
              v-model="ruleForm.staffState"
              placeholder="入职状态">
              <el-option label="正式" value="NORMAL"></el-option>
              <el-option label="试用" value="TRY"></el-option>
              <el-option label="兼职" value="LEAVE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="性别:"
            prop="sex"
            :rules="[
              { required: true, message: '请选择性别', trigger: 'change' },
            ]">
            <el-select
              style="width: 100%"
              v-model="ruleForm.sex"
              placeholder="性别">
              <el-option label="男" value="MALE"></el-option>
              <el-option label="女" value="FEMALE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="入职时间:"
            prop="entryTime"
            :rules="[
              { required: true, message: '请选择入职时间', trigger: 'change' },
            ]">
            <el-date-picker
              style="width: 100%"
              class="date"
              v-model="ruleForm.entryTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="合同期限:"
            prop="expireTime"
            :rules="[
              { required: true, message: '请选择合同期限', trigger: 'change' },
            ]">
            <el-date-picker
              class="date"
              style="width: 100%"
              v-model="ruleForm.expireTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择合同期限"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="住宿地址:"
            prop="stayAddress"
            :rules="[
              { required: true, message: '请选择住宿地址', trigger: 'change' },
            ]">
            <el-input
              @focus="showMap"
              style="width: 100%"
              v-model="ruleForm.stayAddress"
              placeholder="请选择住宿地址"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="地址简称:"
            prop="staySimpleAddress"
            :rules="[
              { required: true, message: '请输入地址简称', trigger: 'change' },
            ]">
            <el-input
              style="width: 100%"
              maxlength="5"
              show-word-limit
              v-model="ruleForm.staySimpleAddress"
              placeholder="地址简称"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="地址方向:"
            prop="stayDirection"
            :rules="[
              { required: true, message: '请选择地址方向', trigger: 'change' },
            ]">
            <el-select
              style="width: 100%"
              v-model="ruleForm.stayDirection"
              placeholder="地址方向">
              <el-option label="东" value="东"></el-option>
              <el-option label="南" value="南"></el-option>
              <el-option label="西" value="西"></el-option>
              <el-option label="北" value="北"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="任职部门:"
            prop="deptId"
            :rules="[
              { required: true, message: '请选择任职部门', trigger: 'change' },
            ]">
            <SelTeamGroup 
              style="width: 100%;"
              :deptNames="''" 
              :isMult="false" 
              :isSelAny="true" 
              :defval="ruleForm.deptId" 
              :width="'100%'" 
              @selItem="getSeledTeamGroup">
            </SelTeamGroup>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="岗位角色:"
            prop="roleId"
            :rules="[
              { required: true, message: '请选择岗位角色', trigger: 'change' },
            ]">
            <el-select
              @change="handleSelect"
              :disabled="!roleOptions.length"
              v-model="ruleForm.roleId"
              filterable
              placeholder="请选择岗位角色"
              style="width: 100%">
              <el-option
                v-for="item in roleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="身份证:"
            prop="positive"
            :rules="[
              { required: false, message: '请上传身份证(正面)', trigger: 'change' },
            ]">
            <UploadImg
              imgName="positive"
              @getImgUrl="setImgUrl"
              :ps="{ userName: uname }"
              url="/company/upload"
              :tiptext="'（正面）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="身份证:"
            prop="reverse"
            :rules="[
              { required: false, message: '请上传身份证(反面)', trigger: 'change' },
            ]">
            <UploadImg
              imgName="reverse"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（反面）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="有效期:"
            prop="idCardExpire"
            :rules="[
              { required: false, message: '身份证有效期', trigger: 'change' },
            ]">
            <el-date-picker
              style="width: 100%"
              value-format="yyyy-MM-dd"
              class="date"
              v-model="ruleForm.idCardExpire"
              type="date"
              placeholder="选择开始日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <TpAmap
      style="height: 400px; z-index: 99"
      v-if="isShowMap"
      :state="isShowMap"
      @getMdState="getAmapState"
      @getMapData="getMapData"
    />

  </div>
</template>

<script>
import { mapGetters } from "vuex";

import TpAmap from "@/views/tpls/tp-amap";
import UploadImg from "@/components/UploadImg";
import SelTeamGroup from '@/components/SelTeamGroup';

import { getCompanyDict, getFindDepts, getRoleByDeptId } from "@/api/services/common.service";

export default {
  name: "BaseFrom",
  components: { SelTeamGroup, TpAmap, UploadImg },
  computed: { ...mapGetters(["uname"]) },
  data() {
    return {
      // 地图显影
      isShowMap: false, 

      ruleForm: {
        // 员工姓名
        realName: "",
        // 联系电话
        phone: "",
        // 身份证号
        idCard: "",
        // 入职公司
        entryCompany: "", 
        // 入职状态
        staffState: "NORMAL", 
        // 年龄
        age: "",
        // 生日
        birthdayTime: "",
        // 性别
        sex: "MALE", 
        // 入职日期
        entryTime: "", 
        // 合同到期时间
        expireTime: "", 
        // 住宿地址全称
        stayAddress: "",
        // 经纬度 
        stayLatLon: "", 
        // 住宿地址简称
        staySimpleAddress: "",
        // 住宿地址方位 
        stayDirection: "",
        // 正面 
        positive: "",
        // 反面 
        reverse: "", 
        // 身份证图片地址
        idCardUrl: "",
        // 身份证有效期
        idCardExpire: "",
        // 任职部门 
        deptId: [], 
        // 岗位角色
        roleId: "", 
      },

      // 入职公司列表
      companyOptions: [],
      // departmentOptions: [],
      // 角色列表
      roleOptions: [],
    };
  },
  created() {
    const that = this;

    // 入职日期（默认今天）
    that.ruleForm.entryTime = that.$moment().format("YYYY-MM-DD");
    // 合同到期日期（默认一年）
    that.ruleForm.expireTime = that.$moment().add(1, 'y').format('YYYY-MM-DD');

    // 获取入职公司
    getCompanyDict().then((res) => { that.companyOptions = res.data; });
    // getFindDepts({ page: 1, rows: 9999 }).then((res) => { that.departmentOptions = res.data; });
  },
  methods: {
    // 所属部门选择
    getSeledTeamGroup(e){
      this.U.setFmArr(this.ruleForm.deptId, e.val);
      
      // 获取部门对应角色
      this.handleChange(this.ruleForm.deptId.join(','));
    },
    handleSelect(data) {
      let ret = this.roleOptions.find(item => item.id === Number(data))
      this.$emit('change', ret)
    },
    // 查询指定部门角色列表
    handleChange(id) {
      this.ruleForm.roleId = "";
      getRoleByDeptId({ deptId: id }).then((res) => {
        this.roleOptions = res.data;
      });
    },
    setCurrentData(data) {
      this.ruleForm = { ...data };
    },
    getSource() {
      this.ruleForm.idCardUrl = [
        this.ruleForm.positive,
        this.ruleForm.reverse,
      ].join(",");
      // delete this.ruleForm.positive
      // delete this.ruleForm.reverse
      let ps = this.U.scopy(this.ruleForm);
      ps.deptId = ps.deptId.join(',');
      return ps;
    },
    handleBlur(e) {
      let data = e.target.value;
      let { age, gender, birthday } = this.U.getIdCardInfo(data, "-");
      this.ruleForm.age = age;
      this.ruleForm.birthdayTime = birthday;
      this.ruleForm.sex = gender ? "MALE" : "FEMALE";
    },
    // 验证
    validate() {
      return new Promise((resolve) => {
        this.$refs.baseRef.validate((valid) => {
          resolve(valid);
        });
      });
    },
    resetFields() {
      this.$refs.baseRef.resetFields();
    },
    showMap() {
      this.isShowMap = true;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const { address, lng, lat } = e;
      this.ruleForm.stayAddress = address;
      this.ruleForm.stayLatLon = `${lng},${lat}`;
      this.isShowMap = false;
    },
    setImgUrl(data) {
      // 正面
      if (data.name === "positive") {
        this.ruleForm.positive = data.url;
      }
      // 反面
      if (data.name === "reverse") {
        this.ruleForm.reverse = data.url;
      }
    },
  },
};
</script>

<style scoped>
</style>